<template>
  <div class="flex min-h-full flex-1 select-none overflow-x-hidden">
    <template v-if="toolbar">
      <slot name="toolbar">
        <Toolbar :toolbar-list="toolbarList" />
      </slot>
    </template>

    <!-- 头部 Logo 和应用名称 -->
    <div
      v-if="logo || appName"
      class="ml-25 absolute left-0 top-0 z-10 flex flex-1 flex-col"
      @click="clickLogo"
    >
      <div class="lg:top-25 xs:left-6 relative flex flex-1 items-center sm:top-6">
        <img v-if="isDark" :alt="appName" src="@/assets/images/zhc-dark.png" width="247" />
        <img v-else :alt="appName" src="@/assets/images/zhc.png" width="247" />
      </div>
      <div class="lg:top-50 relative hidden h-full lg:block">
        <div class="text-1xl text-foreground lg:text-12 font-600 mt-6 font-sans">
          {{ pageTitle }}
        </div>
        <div class="dark:text-muted-foreground lg:text-7 text-placeholder mt-4">
          {{ pageDescription }}
        </div>
        <NiceButton
          class="h-52px! w-164px text-4! rounded-4xl mt-14 bg-[linear-gradient(90deg,#1882F4,#38BAF8)]"
        >
          了解更多
        </NiceButton>
      </div>
    </div>

    <!-- 系统介绍 -->
    <div class="relative hidden w-0 flex-1 lg:block">
      <div class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]">
        <div class="absolute left-0 top-0 size-full"></div>
        <img
          v-if="isDark"
          :alt="appName"
          src="@/assets/images/login-dark.jpg"
          class="size-full object-cover"
        />
        <img
          v-else
          :alt="appName"
          src="@/assets/images/login-light.jpg"
          class="size-full object-cover"
        />
      </div>
    </div>

    <!-- 右侧认证面板 -->
    <div
      class="flex-col-center dark:bg-background-deep bg-background relative w-[40%] flex-1 px-6 py-10 lg:flex-initial lg:px-8"
    >
      <slot></slot>
      <RouterView v-slot="{ Component, route }">
        <Transition appear mode="out-in" name="slide-right">
          <KeepAlive :include="['Login']">
            <component :is="Component" :key="route.fullPath" class="enter-x w-full sm:mx-auto" />
          </KeepAlive>
        </Transition>
      </RouterView>

      <!-- Footer Copyright -->
      <div class="text-muted-foreground absolute bottom-3 flex text-center text-xs">
        <slot name="copyright">
          <LayoutCopyright company-name="绘管家" />
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { ToolbarType } from './components/toolbar.vue'

  import { LayoutCopyright } from '#/layouts/components'
  import { useUserStore } from '#/stores/modules'
  import { NiceButton } from '@nice/nice-ui'

  import Toolbar from './components/toolbar.vue'

  interface Props {
    appName?: string
    clickLogo?: () => void
    copyright?: boolean
    logo?: string
    pageDescription?: string
    pageTitle?: string
    sloganImage?: string
    toolbar?: boolean
    toolbarList?: ToolbarType[]
  }

  defineOptions({
    name: 'AuthLayout',
  })

  withDefaults(defineProps<Props>(), {
    appName: '绘管家',
    copyright: true,
    logo: '#/assets/images/zhc.jpg',
    pageTitle: '智慧城科技管理服务平台',
    pageDescription: '科技织密管理网  服务走进千万家',
    sloganImage: '#/assets/images/login.jpg',
    toolbar: true,
    toolbarList: () => ['language', 'theme'],
    clickLogo: () => {},
  })

  const userStore = useUserStore()
  const isDark = computed(() => userStore.preferences.theme.mode === 'dark')
</script>

<style scoped>
  .login-background {
    background: linear-gradient(
      154deg,
      #07070915 30%,
      hsl(var(--primary) / 30%) 48%,
      #07070915 64%
    );
    filter: blur(100px);
  }

  .dark {
    .login-background {
      background: linear-gradient(
        154deg,
        #07070915 30%,
        hsl(var(--primary) / 20%) 48%,
        #07070915 64%
      );
      filter: blur(100px);
    }
  }
</style>
